<template>
  <div class="tag-list-container">
    <div class="utils">
      开启删除模式：
      <a-switch v-model:checked="canClose" />
      {{  canClose ? '可以删除' : '不可删除' }}
    </div>
    <a-divider></a-divider>
    <div class="tags-box">
      <a-tag class="tag-item" v-for="(item) in tagsList"
             @close="tagItemCloseHandler(item,$event)"
             bordered
             :closable="canClose"
             :color="randomColor()"
      >{{ item.tagName }}</a-tag>
    </div>
    <!--    对话框-->
    <a-modal v-model:open="open" centered  title="确认删除标签吗?" :confirm-loading="confirmLoading" @ok="okHandler">
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import {createVNode, onMounted, reactive, ref} from "vue";
import {deleteTags, getTagList} from '@/api/tag'
import {randomColor} from "@/utils/utils";
import {message,notification,} from "ant-design-vue";
import {ExclamationCircleOutlined} from '@ant-design/icons-vue'

interface tagItem {
  tagId:number|string,
  tagName:string,
  tagAlias:string,
  tagDesc:string
}
let tagsList = ref<Array<tagItem>>([])
let requestTagList = async () => {
  try {
    let res:any = await getTagList()
    if(res.code!==200) return message.error(res.message)
    tagsList.value = res.tags
    console.log(res)
  }catch (e:any) {
    message.error(e.message)
  }
}

let open = ref<boolean>(false)
let confirmLoading = ref<boolean>(false)
let checkedItem = reactive<tagItem>({
  tagId:'',
  tagName:'',
  tagAlias:'',
  tagDesc:''
})
let tagItemCloseHandler = (tagItem:tagItem,event:any) => {
  event.preventDefault()
  open.value = true // 打开模态框
  checkedItem = tagItem
}

let canClose = ref<boolean>(false) // 全局是否可以删除控制



let okHandler = async () => {
  confirmLoading.value = true
  let {tagId,tagName} = checkedItem
  try {
    let res:any = await deleteTags(tagId)
    confirmLoading.value = false
    if(res.code !== 200){
      confirmLoading.value = false
      open.value = false
      notification.error({message:res.message})
      return
    }
    let index = tagsList.value.findIndex(item => item.tagId == tagId)
    tagsList.value.splice(index,1)
    open.value = false
    notification.success({message:"删除成功!"})
  }catch (e:any) {
    confirmLoading.value = false
    open.value = false
    notification.error({message:e.message})
  }
}

onMounted(() => {
  requestTagList()
})

</script>

<style lang="scss" scoped>
.tag-list-container {
  padding: 15px;
  .utils {
    padding: 15px;
  }
  .tags-box {
    ::v-deep .tag-item {
      font-size: 18px;
      padding: 10px 20px;
      margin: 10px;
      .ant-tag-close-icon {
        font-size: 16px;
      }
    }
  }
}
</style>
